package com.tencent.compose.sample.mainpage.material3

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowForward
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Info
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.ListItemDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Switch
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import org.jetbrains.compose.ui.tooling.preview.Preview


@Preview()
@Composable
internal fun ListItemDemo(){
    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        Text(
            text = "不同样式的 ListItem 示例",
            style = MaterialTheme.typography.titleLarge,
            modifier = Modifier.padding(16.dp)
        )

        // 1. 基础列表项 - 只有标题
        ListItem(
            headlineContent = { Text("基础列表项") }
        )

        // 2. 带前缀图标的列表项
        ListItem(
            headlineContent = { Text("带前缀图标的项") },
            leadingContent = {
                Icon(
                    imageVector = Icons.Default.Email,
                    contentDescription = "邮件图标"
                )
            }
        )

        // 3. 带后缀内容的列表项
        ListItem(
            headlineContent = { Text("带后缀内容的项") },
            trailingContent = {
                Text(
                    "新",
                    style = MaterialTheme.typography.labelSmall,
                    color = Color.Red
                )
            }
        )

        // 4. 带副标题的列表项
        ListItem(
            headlineContent = { Text("带副标题的项") },
            supportingContent = { Text("这是副标题内容，用于补充说明") },
            leadingContent = {
                Icon(
                    imageVector = Icons.Default.Info,
                    contentDescription = "信息图标"
                )
            }
        )

        // 5. 带前缀文字和后缀图标的列表项
        ListItem(
            headlineContent = { Text("通知设置") },
            overlineContent = { Text("系统") }, // overline 在标题上方
            leadingContent = {
                Box(
                    modifier = Modifier
                        .size(40.dp)
                        .background(Color.Blue, CircleShape),
                    contentAlignment = Alignment.Center
                ) {
                    Text(
                        "S",
                        color = Color.White,
                        fontWeight = FontWeight.Bold
                    )
                }
            },
            trailingContent = {
                Switch(
                    checked = true,
                    onCheckedChange = {}
                )
            }
        )

        // 6. 带多个后缀元素的列表项
        ListItem(
            headlineContent = { Text("多元素后缀") },
            supportingContent = { Text("显示时间和箭头") },
            trailingContent = {
                Row(verticalAlignment = Alignment.CenterVertically) {
                    Text(
                        "10:30",
                        style = MaterialTheme.typography.bodySmall,
                        color = Color.Gray
                    )
                    Icon(
                        imageVector = Icons.Default.ArrowForward,
                        contentDescription = "箭头",
                        modifier = Modifier.size(20.dp)
                    )
                }
            }
        )

        // 7. 自定义颜色的列表项
        ListItem(
            headlineContent = { Text("自定义颜色项") },
            colors = ListItemDefaults.colors(
                containerColor = Color.LightGray.copy(alpha = 0.3f),
                headlineColor = Color.Blue
            ),
            leadingContent = {
                Icon(
                    imageVector = Icons.Default.Star,
                    contentDescription = "星星图标"
                )
            }
        )
    }
}